//Q1:让sheep自身的移动和位置的移动
//Q2:让速度与自身的动画相协调
//Q3:随机产生sheep
//Q4:sheep拖拽


// var sheep = document.getElementsByClassName('sheep')[0];
// var speed = 10;
// var bacNum = 0;
// var timer = setInterval(function () {
//     var oleft = sheep.offsetLeft - speed;
//     sheep.style.left = oleft + 'px';
// }, 80)

// var sheepAnimate = setInterval(function () {
//     bacNum = bacNum + 164;
//     if (bacNum == 1312) {
//         bacNum = 0;
//     }
//     sheep.style.backgroundPosition = -bacNum + "px " + 0 + 'px';
// },80)

// (function(){
// })()

{//块级作用域
    var obj = {
        frequency: 80,//频率
        speed: 10,//速度
        bacNum: 0,//背景图片变换的变量
        stage: document.getElementById('stage'),//舞台
        maxSheep: 6
    }

    function SheepOrigin(stuff) {//羊的构造函数
        this.sheep = document.createElement('div');
        this.sheep.className = 'sheep';
        stuff.stage.appendChild(this.sheep);
        //创建羊并赋予类名 添加到舞台
        this.speed = stuff.speed;//速度
        this.bacNum = stuff.bacNum;//背景图片变换的变量
        this.width = this.sheep.offsetWidth;//sheep的宽度
        this.frequency = Math.floor(Math.random() * stuff.frequency) + 30;//30----100之间
        this.top = 0;
        this.stage = stuff.stage;
        this.speed2 = stuff.speed//保存原有的速度；
    }

    init();//初始化
    function init() {
        var timer = setInterval(function () {

            var sheeps = obj.stage.children.length;//舞台上羊的数量
            console.log(sheeps);
            if (sheeps < obj.maxSheep) {//比较羊的与最大数量
                var sheep = new SheepOrigin(obj)
                sheepRun(sheep);
            }

        }, 2000)
    }

    function sheepRun(origin) {
        // console.log(origin)
        origin.timer = setInterval(function () {
            var oleft = origin.sheep.offsetLeft - origin.speed;
            origin.sheep.style.left = oleft + 'px';
            if (oleft < -origin.width) {
                clearInterval(origin.timer);//当羊走出舞台移除定时器
                origin.stage.removeChild(origin.sheep);//同时移除羊
            }
            //羊的位置的移动
            origin.bacNum = origin.bacNum + origin.width;
            if (origin.bacNum == (origin.width * 8)) {
                origin.bacNum = 0;
            }
            origin.sheep.style.backgroundPosition = -origin.bacNum + "px " + origin.top + 'px';
        }, origin.frequency)
        // 羊的自身的运动

        //小羊的拖拽
        origin.sheep.addEventListener('mousedown', function (e) {
            e = e || window.event;
            origin.m_x = e.pageX;
            origin.m_y = e.pageY;

            origin.speed = 0;
            origin.top = -128;

            document.addEventListener('mousemove', mouseFn);
            function mouseFn(e) {
                e = e || window.event;
                var chax = e.pageX - origin.m_x;
                var chay = e.pageY - origin.m_y;
                origin.sheep.style.left = origin.sheep.offsetLeft + chax + "px";
                origin.sheep.style.top = origin.sheep.offsetTop + chay + "px";
                origin.m_x = e.pageX;
                origin.m_y = e.pageY;

            }
            this.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', mouseFn);
                origin.top = 0;
                origin.speed = origin.speed2;
            })


        })

    }

}
